<template>
  <div v-if="sureAdmin">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>营业额统计</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <div class="count">
        <!-- <div class="title">营业状况</div> -->
        <div class="data_wrapper">
          <div class="dayTotal wrapper">
            <div class="line">
              今日总营业额
              <span>{{ orderTotal.total }}元</span>
            </div>
            <div>奶茶今日营业额：{{ orderTotal.tea }}元</div>
            <div>商品今日营业额：{{ orderTotal.commodity }}元</div>
          </div>
          <div class="dayNumber wrapper">
            <div class="line">
              今日总订单量<span>{{ oredrNum.total }}单</span>
            </div>
            <div>奶茶今日订单量：{{ oredrNum.tea }}单</div>
            <div>商品今日订单量：{{ oredrNum.commodity }}单</div>
          </div>
          <div class="total wrapper">
            <div class="line">
              总营业额<span>{{ total.total }}元</span>
            </div>
            <div>奶茶总营业额：{{ total.tea }}元</div>
            <div>商品总营业额：{{ total.commodity }}元</div>
          </div>
        </div>
      </div>
      <!-- 2. 为ECharts准备一个具备大小（宽高）的Dom -->
      <div class="echartsWrapper">
        <div class="selectDate">
          <el-switch
            style="display: block; margin-bottom: 20px"
            v-model="checkDate"
            @change="changeCheckDate"
            active-color="#13ce66"
            inactive-color="#409EFF"
            active-text="按月查看"
            inactive-text="按年查看"
          >
          </el-switch>
          <el-date-picker
            v-model="date"
            :type="sureDate"
            @change="changeDate"
            :clearable="false"
            :value-format="dateFormat"
          ></el-date-picker>
        </div>
        <div id="turnoverEcharts"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
// 1. 导入 echarts
import echarts from "echarts";
export default {
  data() {
    return {
      //今日订单量
      oredrNum: {
        total: 0,
        tea: 0,
        commodity: 0,
      },
      //今日总收益
      orderTotal: {
        total: 0,
        tea: 0,
        commodity: 0,
      },
      //总收益
      total: {
        total: 0,
        tea: 0,
        commodity: 0,
      },
      // date: {
      //   year: 2021,
      //   month: 4,
      // },
      // year: "2021",
      date: "",
      sureDate: "month",
      checkDate: true,
      dateFormat: "yyyy-MM",
      sureAdmin: false,
      turnoverOpinion: {
        title: {
          text: "营业额折线图",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["总营业额", "奶茶营业额", "商品营业额"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} 元",
          },
        },
        series: [
          {
            name: "总营业额",
            type: "line",
            smooth: true,
            data: [],
          },
          {
            name: "奶茶营业额",
            type: "line",
            smooth: true,
            data: [],
          },
          {
            name: "商品营业额",
            type: "line",
            smooth: true,
            data: [],
          },
        ],
      },
    };
  },
  created() {
    var Admin = window.localStorage.getItem("admin");
    if (Admin == 1) {
      this.sureAdmin = true;
      this.getNowTime();
      this.getData();
      if (this.checkDate) {
        this.getMonthTurnover();
      } else {
        this.getYearTurnover();
      }
    } else {
      this.sureAdmin = false;
    }
  },
  mounted() {
    // this.getMonthTurnover();
    // this.drawLine();
  },
  methods: {
    changeDate() {
      if (this.checkDate) {
        this.getMonthTurnover();
      } else {
        this.getYearTurnover();
      }
    },
    changeCheckDate() {
      if (this.checkDate) {
        this.sureDate = "month";
        this.dateFormat = "yyyy-MM";
      } else {
        this.sureDate = "year";
        this.dateFormat = "yyyy";
      }
      this.getNowTime();
      if (this.checkDate) {
        this.getMonthTurnover();
      } else {
        this.getYearTurnover();
      }
    },
    getNowTime() {
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      if (!this.checkDate) {
        var defaultDate = `${year}`;
        return (this.date = defaultDate);
      }

      var month = now.getMonth(); //得到月份
      month = month + 1;
      month = month.toString().padStart(2, "0");
      var defaultDate = `${year}-${month}`;
      this.date = defaultDate;
    },
    async getData() {
      const { data: resNum } = await this.$http.get("statistics/OrderVolume");
      const { data: resTotal } = await this.$http.get(
        "statistics/todayTurnover"
      );
      const { data: total } = await this.$http.get("statistics/turnover");
      if (resNum.code != 200 || resTotal.code != 200 || total.code != 200) {
        return this.$message.error("获取数据失败！");
      }
      this.oredrNum.total = resNum.data.statisticsVO.total;
      this.oredrNum.tea = resNum.data.statisticsVO.tea;
      this.oredrNum.commodity = resNum.data.statisticsVO.commodity;
      this.orderTotal.total = resTotal.data.statisticsVO.total / 100;
      this.orderTotal.tea = resTotal.data.statisticsVO.tea / 100;
      this.orderTotal.commodity = resTotal.data.statisticsVO.commodity / 100;
      this.total.total = total.data.statisticsVO.total / 100;
      this.total.tea = total.data.statisticsVO.tea / 100;
      this.total.commodity = total.data.statisticsVO.commodity / 100;
      // console.log("ssssssss", this.total);
    },
    async getMonthTurnover() {
      const { data: res } = await this.$http.get(
        "statistics2/monthTurnover?date=" + this.date
      );
      if (res.code !== 200) {
        return this.$message.error("获取月营业额数据失败！");
      }
      this.turnoverOpinion.xAxis.data = res.data.dateList;
      this.turnoverOpinion.series[0].data = res.data.totalList;
      this.turnoverOpinion.series[1].data = res.data.milkyTeaList;
      this.turnoverOpinion.series[2].data = res.data.commodityList;

      this.drawLine();
    },
    async getYearTurnover() {
      const { data: res } = await this.$http.get(
        "statistics2/yearTurnover?year=" + this.date
      );
      if (res.code !== 200) {
        return this.$message.error("获取年营业额数据 失败！");
      }
      this.turnoverOpinion.xAxis.data = res.data.dateList;
      this.turnoverOpinion.series[0].data = res.data.totalList;
      this.turnoverOpinion.series[1].data = res.data.milkyTeaList;
      this.turnoverOpinion.series[2].data = res.data.commodityList;

      this.drawLine();
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(
        document.getElementById("turnoverEcharts"),
        "shine"
      );
      // 绘制图表
      myChart.setOption(this.turnoverOpinion);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.wrapper {
  height: 200px;
  width: 280px;
  // background-color: #00d2d3;
  border-radius: 10px;
}

.count {
  margin: 0 auto;
  width: 90%;
  // .title {
  //   text-align: start;
  //   // margin-left: 50px;
  // }
  .data_wrapper {
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
    color: rgba(255, 255, 255, 0.884);
    line-height: 50px;
    text-align: start;
    font-size: 14px;
    .dayTotal {
      background-color: #3498db;
      padding-left: 20px;
      // div{
      //   margin-left: 20px;
      // }
    }
    .dayNumber {
      background-color: #2ecc71;
      padding-left: 20px;
    }
    .total {
      background-color: #1abc9c;
      padding-left: 20px;
      // padding-right: 20px;
    }
    .line {
      font-size: 20px;
      // font-weight: bolder;
      border-bottom: 2px solid rgba(255, 255, 255, 0.418);
      margin: 15px 0px;
      position: relative;
      span {
        position: absolute;
        right: 25px;
      }
    }
  }
}

#turnoverEcharts {
  // background-color: aquamarine;
  width: 80%;
  height: 500px;
  // border: 1px solid red;
  // margin: 10px auto;
}
.echartsWrapper {
  width: 100%;
  // height: 500px;
  // border: 1px solid red;
  margin: 50px auto;
  position: relative;
  .selectDate {
    position: absolute;
    right: 3%;
    // width: 5%;
  }
}
</style>
